var canvas = document.getElementById('canvas');

var drawBoard = {
    //定义全局变量
    gloaObj: {

        W: document.body.clientWidth,
        H: document.body.clientHeight,
        CTX: null,
        DATA: [],	//储存绘制数据
        COLOR: '#f00056',
        LINE: 5,
        PENS: 0,
        ERAS: 0,
        TIMER: null
    },
    init: function () {
        //显示画板
        this.showBoard();
        //默认画笔功能
        this.drawPen();
    },
    //显示画板
    showBoard: function () {

        var canvas = document.getElementById('canvas');
        drawBoard.gloaObj.CTX = canvas.getContext('2d');

        canvas.style.display = 'block';
        canvas.width = this.gloaObj.W;
        canvas.height = this.gloaObj.H;


    },
    //画笔功能
    drawPen: function () {

        var that = this;
        document.onmousedown = function (ev) {


            var ev = ev || event;
            var sx = ev.clientX;
            var sy = ev.clientY;
            that.gloaObj.PENS++;
            //画笔性能优化 没36ms取一个点
            var onOff = true;

            document.onmousemove = function (ev) {

                if (!onOff) return;
                onOff = false;
                setTimeout(function () {

                    onOff = true;
                }, 36);
                var ev = ev || event;
                var ex = ev.clientX;
                var ey = ev.clientY;
                var n = that.gloaObj.DATA.length;

                that.gloaObj.DATA[n] = new Object();
                //为画笔绘制的对象定义属性'point-line'
                //将该对象存入绘制数据中
                that.gloaObj.DATA[n].attr = 'point-line';
                that.gloaObj.DATA[n].count = that.gloaObj.PENS;
                that.gloaObj.DATA[n].sx = sx;
                that.gloaObj.DATA[n].sy = sy;
                that.gloaObj.DATA[n].ex = ex;
                that.gloaObj.DATA[n].ey = ey;
                that.gloaObj.DATA[n].w = that.gloaObj.LINE;
                that.gloaObj.DATA[n].c = that.gloaObj.COLOR;
                //直接绘制
                that.gloaObj.CTX.beginPath();
                that.gloaObj.CTX.moveTo(sx, sy);
                that.gloaObj.CTX.lineTo(ex, ey);
                that.gloaObj.CTX.closePath();
                that.gloaObj.CTX.strokeStyle = that.gloaObj.COLOR;
                that.gloaObj.CTX.lineJoin = 'round';
                that.gloaObj.CTX.lineCap = 'round';
                that.gloaObj.CTX.lineWidth = that.gloaObj.LINE;
                that.gloaObj.CTX.stroke();
                sx = ex;
                sy = ey;
            };

            document.onmouseup = function () {

                document.onmousemove = '';
            };

            return false;
        };
    }
};





drawBoard.init();